<template>
    <ul class="classList">
        <li v-for="item in classItems" :key="item.title">
            <a :class=item.class>{{ item.title }}</a>
        </li>
    </ul>
</template>

<script>
export default {
    name: 'ClassList',
    data(){
        return{
            classItems: [
                {"title":"新鲜水果","class":"fruit"},
                {"title":"海鲜水产","class":"seafood"},
                {"title":"猪牛羊肉","class":"meat"},
                {"title":"禽类蛋品","class":"egg"},
                {"title":"新鲜蔬菜","class":"vegetables"},
                {"title":"速冻食品","class":"ice"},
            ]
        }
    }
}
</script>

<style>
.classList{width:198px;height:270px;border-left:1px solid #eee;border-right:1px solid #eee;}
.classList li{height:44px;border-bottom:1px solid #eee;background:url(../../assets/images/icons.png) 178px -257px no-repeat #fff;cursor: pointer;}

.classList li a{display:block;height:44px;line-height:44px;text-indent:71px;font-size:14px;color:#333}
.classList li a:hover{color:#ff8800}

.classList li .fruit{background:url(../../assets/images/icons.png) 28px 0px no-repeat;}
.classList li .seafood{background:url(../../assets/images/icons.png) 28px -43px no-repeat;}
.classList li .meat{background:url(../../assets/images/icons.png) 28px -86px no-repeat;}
.classList li .egg{background:url(../../assets/images/icons.png) 28px -132px no-repeat;}
.classList li .vegetables{background:url(../../assets/images/icons.png) 28px -174px no-repeat;}
.classList li .ice{background:url(../../assets/images/icons.png) 28px -220px no-repeat;}
</style>